<template>
    <div class="w980">
        <div class="bs-example-modal-lg" id="edit_doctorplan">
            <button type="button" class="close" id="handclose" @click="handclose"><span>&times;</span></button>
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="cur">排班信息</h2>
                    </div>
                    <div class="modal-body cbafter">
                        <div class="fl"> <img :src="optobj.imgurl"></div>
                        <div class="fl">
                            <p><span class="name">{{optobj.name}}</span><span class="grey">{{optobj.levelText}}</span> <span class="orgname">{{optobj.orgName}}</span>|<span>{{optobj.deptName}}</span></p>
                            <p><span class="grey">擅长：</span><span>{{optobj.speciality}}</span></p>
                        </div>
                        <div class="state" :class="{state1:optobj.verifyState == 1,state2:optobj.verifyState == 2}"></div>
                        <div class="cb verifyState0" v-show="optobj.verifyState == 2">
                            <h2>抱歉，你的审核未通过！</h2>
                            <p>{{optobj.verifySuggestion}}</p>
                        </div>
                        <table class="table cb table-bordered table-condensed">
                            <caption></caption>
                            <tr>
                                <th class="active" style="border-bottom:none">坐诊</th>
                                <th class="active" v-for="item in datearr">{{item}}</th>
                            </tr>
                            <tr>
                                <th class="active" style="border-top:none">时间</th>
                                <th class="active" v-for="item in dayarr">{{item}}</th>
                            </tr>
                            <tr>
                                <td class="active">上午</td>
                                <td v-for="item in arr1">
                                    <p>{{item.orgName}}</p>
                                    <p>{{item.deptName}}</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="active">下午</td>
                                <td v-for="item in arr2">
                                    <p>{{item.orgName}}</p>
                                    <p>{{item.deptName}}</p>
                                </td>
                            </tr>
                            <tr>
                                <td class="active">晚上</td>
                                <td v-for="item in arr3">
                                    <p>{{item.orgName}}</p>
                                    <p>{{item.deptName}}</p>
                                </td>
                            </tr>
                        </table>
                        <form class="form-horizontal" role="form" id="saveverifyform" v-on:submit.prevent="saveverify" v-show="optobj.verifyState==0">
                            <div class="form-group">
                                <label for="" class="col-md-3 control-label" style="padding-top:15px">审核意见：</label>
                                <div class="col-md-8">
                                    <div class="radio">
                                        <label class="checkbox-inline">
                                            <input type="radio" name="verify" value="1" required v-model="verifydata.verifyState">通过
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio" name="verify" value="2" required v-model="verifydata.verifyState">不通过
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" v-show="verifydata.verifyState==2">
                                <label class="col-md-3 control-label">不通过理由 :</label>
                                <div class="col-md-8">
                                    <textarea class="form-control" rows="3" placeholder="请输入审核不通过的理由" v-model="verifydata.verifySuggestion" :required="verifydata.verifyState==2"></textarea>
                                </div>
                            </div>
                            <div class="form-group save">
                                <button type="submit" class="default ok center">确认</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="bg_master2" style="display:none"></div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
export default {
    data() {
            return {
                nextmonday: "",
                datearr: [], //日期数组
                dayarr: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], //星期数组固定死
                arr1: [], //上午
                arr2: [], //下午
                arr3: [], //晚上
                optobj: {
                    name: "",
                    levelText: "",
                    orgName: "",
                    deptName: "",
                    speciality: ""
                },
                verifydata: {
                    "verifyId": "", //医生出诊排班数据ID
                    "verifyState": "", //审核状态
                    "verifySuggestion": "" //审核意见

                },

            }
        },
        computed: {

        },
        components: {

        },
        props: {

        },
        ready() {

        },
        methods: {

            // 获取数据请求的方法
            getdata() {
                    var that = this;
                    let optstr = `['${this.optobj.doctorId}','${this.optobj.planBeginDate}']`;
                    $.when(Public.commonajax("coms.doctorPlanService", "queryDoctorPlan", optstr))
                        .done(function(res) {
                            if (res.code == 200) {
                                var amarr = [],
                                    pmarr = [],
                                    ntarr = [];
                                amarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 1;
                                });
                                pmarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 2;
                                });
                                ntarr = res.body.doctorPlanList.filter(function(item) {
                                    return item.planClass == 3;
                                });
                                that.arr1 = that.getdataarr(amarr);
                                that.arr2 = that.getdataarr(pmarr);
                                that.arr3 = that.getdataarr(ntarr);
                            }
                        });
                },
                getdataarr(arr) { //通过另外一个数组的索引，来填充数据，从而活动上午下午晚上对应的数据
                    var indexarr = [];
                    var temarr = [{
                        text: 'noconent'
                    }, {
                        text: 'noconent'
                    }, {
                        text: 'noconent'
                    }, {
                        text: 'noconent'
                    }, {
                        text: 'noconent'
                    }, {
                        text: 'noconent'
                    }, {
                        text: 'noconent'
                    }];
                    if (arr && arr.length > 0) {
                        $.each(this.datearr, function(index, el) {
                            $.each(arr, function(index2, el2) {
                                if (el == el2.planDate.substring(0, 10)) {
                                    indexarr.push(index);
                                }
                            });
                        });

                        $.each(indexarr, function(index, el) {
                            temarr[el] = arr[index]
                        });

                    }
                    return temarr
                },
                // 直接用$refs运行子组件的方法
                getDoctorPlan(item) {
                    this.optobj = item;
                    $("#edit_doctorplan").show();
                    $(".bg_master2").show();
                    this.getdata();
                    this.verifydata = {
                        "verifyId": item.verifyId, //医生出诊排班数据ID
                        "verifyState": item.verifyState, //审核状态
                        "verifySuggestion": item.verifySuggestion //审核意见

                    };
                    this.datearr = this.mondaytosundayarr(this.optobj.planBeginDate);
                },
                handclose() {
                    $("#edit_doctorplan").hide();
                    $(".bg_master2").hide();
                },

                // 根据周一得到本周的日期（monday只传周一的时间）
                mondaytosundayarr(monday) {
                    var now = new Date(monday);
                    var arr = [];
                    var date = now.getDate();
                    for (let i = 0; i < 7; i++) {
                        // now.setDate(date + i)
                        var arritem = this.addDate(monday, i);
                        arr.push(arritem)
                            // arr.push(Public.formatDate(now))
                    }
                    return arr;
                },

                // 日期增减函数
                addDate(date, days) { //days往前算就传入负数，往后算就传入正数
                    var d = new Date(date);
                    d.setDate(d.getDate() + days);
                    var month = d.getMonth() + 1;
                    var day = d.getDate();
                    if (month < 10) {
                        month = "0" + month;
                    }
                    if (day < 10) {
                        day = "0" + day;
                    }
                    var val = d.getFullYear() + "-" + month + "-" + day;
                    return val;
                },
                saveverify() {
                    var that=this;
                    if (this.verifydata.verifyState == 1) {
                        this.verifydata.verifySuggestion = "";
                    };
                    $.when(Public.commonajax("coms.doctorPlanService", "saveDoctorPlanVerify", "[" + JSON.stringify(this.verifydata) + "]"))
                        .done(function(res) {
                            if (res.code == 200) {
                                Public.ajaxPrompt("保存成功");
                                that.verifydata = {
                                    "verifyId": "", //医生出诊排班数据ID
                                    "verifyState": "", //审核状态
                                    "verifySuggestion": "" //审核意见
                                }
                                $("#edit_doctorplan").hide();
                                $(".bg_master2").hide();
                                that.$dispatch('saveverify')
                            }
                        })
                },

        },
        events: {

        },
        watch: {

        }
}
</script>
<style scoped>
#edit_doctorplan .modal-body {
    padding: 40px 30px;
    overflow-y: auto;
    overflow-x: hidden;
}

.w980 {
    padding: 0
}

#edit_doctorplan .modal-header {
    min-height: 60px;
    padding: 0;
    border-bottom: 1px solid #e5e5e5;
    background: #fafafa;
    border-radius: 5px;
}

#edit_doctorplan .modal-header h2 {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #1fc49a;
    padding-left: 20px;
}

#edit_doctorplan {
    position: absolute;
    width: 1000px;
    height: 700px;
    /*background: red;*/
    top: 100px;
    display: none;
    left: 50%;
    margin-left: -500px;
    border-radius: 10px;
    z-index: 2;
}

#handclose {
    position: absolute;
    z-index: 99;
    top: 40px;
    right: 70px
}

#edit_doctorplan img {
    height: 63px;
    width: auto
}

#edit_doctorplan p span {
    display: inline-block;
    margin-left: 10px;
    height: 24px;
    line-height: 24px;
}

#edit_doctorplan .modal-body>div:nth-child(1) {
    width: 70px;
}

#edit_doctorplan .modal-body>div:nth-child(2) {
    width: 700px;
}

#edit_doctorplan .modal-body .name {
    font-weight: 700;
    color: #1dc499
}

#edit_doctorplan .modal-body .orgname {
    padding-right: 10px
}

#edit_doctorplan .modal-body .grey {
    color: #999;
}

.table {
    margin-top: 60px;
}

.table td,
.table th {
    text-align: center;
}

.table th {
    font-weight: normal;
}

.table tr td {
    color: #1dc499;
}

.table tr td.active {
    color: #333
}

.table tr th:nth-child(1) {
    color: #1dc499
}

.table caption div {
    float: right;
    width: 80px;
    color: #1dc499;
    cursor: pointer;
}

.verifyState0 {
    text-align: center;
}

.verifyState0 h2 {
    color: #ef5037;
    font-size: 20px;
    line-height: 50px
}

#edit_doctorplan .modal-body {
    position: relative;
}

#edit_doctorplan .modal-body .state {
    position: absolute;
    top: 0;
    right: 0;
    width: 99px;
    height: 88px;
}

#edit_doctorplan .modal-body .state1 {
    background: url(../assets/img/state1.jpg) no-repeat center center;
}

#edit_doctorplan .modal-body .state2 {
    background: url(../assets/img/state2.jpg) no-repeat center center;
}

.buttongroup {
    width: 300px;
    margin: 10px auto;
}

.buttongroup button {
    display: inline-block;
}

.buttongroup button:nth-child(2) {
    margin-left: 30px
}
</style>
